<template>
  <div class="serchhouse-content">
    <serch-nav @onSearch="onSearch" />
    <hot-serch :citys="hotSearch" title="热门搜索" @toHotCity="toHotCity" />
    <hot-serch :citys="historySearchList" title="历史搜索" @toHotCity="toHotCity">
      <p slot="deleteHistory" class="deleteHistory" @click="toDeleteHistory">清空历史记录</p>
    </hot-serch>
  </div>
</template>

<script>
import SerchNav from "./childcomps/SerchNav";
import HotSerch from "@/components/common/hotserch/HotSerch";

import {
  getHotAddressList,
  getHistorySearchList,
  addHistorySearch,
  deleteHistory,
} from "network/villagesearch";

import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "serchhouseaaa",
  components: {
    SerchNav,
    HotSerch,
  },
  data() {
    return {
      hotSearch: [],
      historySearchList: [],
      historySearchListId: [],
    };
  },
  methods: {
    ...mapMutations({
      getvillageSearch: "moduleHotCity/getvillageSearch",
      addthistorySearch: "moduleHotCity/addthistorySearch",
      emptyHistorySearchList: "moduleHotCity/emptyHistorySearchList",
    }),
    ...mapActions({
      // uploadHistorySearchList: "moduleHotCity/uploadHistorySearchList",
    }),
    //点击能够获取到城市信息
    toHotCity(item) {
      let id = this.userId;
      //把选择的地区放到vuex中
      localStorage.setItem("villageSearch", item);
      this.getvillageSearch(item);
      //添加历史搜索
      if (this.userId) {
        let userId = this.userId;
        let context = item;
        addHistorySearch({ userId, context }).then((res) => {
          this.historySearchList = [];
          this.toGetHistorySearchList();
        });
      }
      this.$router.push("/areasearch/synthesize");
      // setTimeout(() => {
      //   this.$router.go(0);
      // });
    },
    toDeleteHistory() {
      let id = this.userId;
      if (this.historySearchList.length == 0) {
        this.$toast({
          message: "历史记录就是空哦~",
          position: "bottom",
        });
        return;
      }
      deleteHistory(this.historySearchListId).then((res) => {
        if (res.code == 200) {
          this.$toast({
            message: "清空成功",
            position: "bottom",
          });
          this.historySearchList = [];
        }
      });
    },
    toGetHistorySearchList() {
      let id = this.userId;
      getHistorySearchList(id).then((res) => {
        // console.log(res.data);
        for (let item of res.data) {
          this.historySearchList.push(item.context);
          this.historySearchListId.push(item.id);
        }
      });
    },
    onSearch(val) {
      this.historySearchList = [];
      this.toGetHistorySearchList();
    },
  },
  created() {
    // console.log(123);
    let cityName = this.city;
    //获取热门搜索的列表
    getHotAddressList({ cityName }).then((res) => {
      for (let item of res.data) {
        this.hotSearch.push(item.villageName);
      }
    });
    // this.uploadHistorySearchList(id);
    this.toGetHistorySearchList();
  },
  computed: {
    ...mapState({
      city: (state) => state.moduleHotCity.city,
      // historySearchList: (state) => state.moduleHotCity.historySearchList,
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.serchhouse-content {
  height: 100vh;
  background-color: #efefef;
  padding-top: 50px;
}
.deleteHistory {
  font-size: 12px;
  font-weight: normal;
}
</style>